<template>
  <div class="a_share">
    <h1>{{item.name}}</h1>
    <div class="a_content">
      <div class="a_content_l">
        <img src="../../../assets/images/banyao.jpg" alt="">
      </div>
      <div class="a_content_r">
        <p>开始时间： {{item.starttime}}</p>
        <p>结束时间： {{item.endtime}}</p>
        <p>举办地点： {{item.address}}</p>
        <p>主办方：{{item.sponsor}}</p>
        <p>报名截止：{{item.enrolltime}}</p>
        <el-button type="primary">立即报名</el-button>
      </div>
    </div>
    <!-- 主要内容 -->
    <div class="a_main">
      <div class="a_main_l">
        <div class="content-item">
          <div class="tit">
            <span>介绍</span>
          </div>
          <div class="text">
            <p>{{item.summary}}</p>
          </div>

          <div class="content-item">
            <div class="tit">
              <span>主要内容</span>
            </div>
            <div class="text">
              <p>{{item.detail}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="a_main_r">
        <div class="content-item">
          <div class="tit">
            <span>活动组织者</span>
          </div>
          <div class="text">
            <h4>主办方： {{item.sponsor}}</h4>
          </div>
        </div>
        <div class="content-item">
          <div class="tit">
            <span>相关链接</span>
          </div>
          <div class="text">
            <h4>活动官网： infoQ.com</h4>
          </div>
        </div>
        <div class="content-item">
          <div class="tit">
            <span>点击分享</span>
          </div>
          <div class="text">
            <div class="social-share" data-sites="weibo,wechat" :data-title="name" data-url="http://www.itheima.com"
              data-wechatQrcodeHelper  ="'<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'">

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
    import gatheringApi from '@/api/gathering'
    export default {
        head: {
            script: [{
                src: 'https://cdn.bootcss.com/social-share.js/1.0.16/js/social-share.min.js'
            }],
            link: [{
                rel: 'stylesheet',
                href: 'https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css'
            }]
        },

        asyncData({
            params
        }) {
            return gatheringApi.findById(params.id).then(res => {
                console.log(res.data.data);
                return {
                    item: res.data.data
                }
            })
        },
    }
</script>
<style>
    .a_share {
        width: 1200px;
        margin: 0 auto;
        height: 700px;
    }

    .a_share h1 {
        margin-top: 20px;
        font-size: 24px;
        line-height: 36px;
    }

    .a_content {
        height: 318px;
        background-color: #fff;
        display: flex;
    }

    .a_content>div {
        width: 50%;
    }

    .a_content_l img {
        width: 564px;
        height: 318px;
    }

    .a_content_r {
        padding: 25px 0 0 0px;
    }

    .a_content_r>p {
        font-size: 16px;
        color: #666;
        line-height: 28px;
    }

    .big {
        font-size: 20px;
    }

    .a_main {
        display: flex;
        margin-top: 20px;
        width: 1200px;
    }

    .a_main div {
        border-radius: 10px;
    }

    .a_main_l {
        flex: 6;
    }

    .a_main_r {
        flex: 4;
        padding-left: 20px;
    }

    .content-item {
        margin-bottom: 10px;
        background: #fff;
    }

    .tit {
        padding-top: 18px;
        margin-bottom: 5px;
        font-size: 18px;
    }

    .tit span {
        padding-left: 20px;
        font-size: 18px;
        border-left: 2px solid #e64620;
        color: #e64620;
    }

    .text {
        padding: 10px 22px;
        line-height: 26px;
        font-size: 14px;
    }
</style>
